<template>
  <div class="projectLeft-container">
      <div class="menuBox">
        <el-card class="proMunList">
            <h3>项目管理</h3>
            <el-row>
                <el-col :span="18">
                     <el-input
                    class="searchIpt"
                    placeholder="请输入搜索内容"
                    prefix-icon="el-icon-search"
                    v-model="searchKeyWord">
                    </el-input>
                </el-col>
                <el-col :span="6"><el-button type="primary" icon="el-icon-search" @click="searchPro">搜索</el-button></el-col>
            </el-row>

            <div class="myJointest">
                <h4>我参与的项目</h4>  
                <span class="joinIcon" @click="projectList">
                    <i class="el-icon-caret-right iconItem" v-show="!isShowIcon"></i>
                    <i class="el-icon-caret-bottom iconItem" v-show="isShowIcon"></i>   
               </span>
            </div>
            <el-row class="proListname" v-show="isShowIcon" v-for="item in myJoinProList" :key="item.id">
                <div class="proListname_left">{{item.status | proStatus}}</div>
                <div class="proListname_right">
                    <p>{{item.proName}}</p>
                    <p>{{item.proUserName}}</p>
                </div>
            </el-row>
            <!-- ====================== -->
            <div class="myJointest">
                <h4>其他任务</h4>  
                <span class="joinIcon" @click="projectOtherList">
                    <i class="el-icon-caret-right iconItem" v-show="!isShowIconOther"></i>
                    <i class="el-icon-caret-bottom iconItem" v-show="isShowIconOther"></i>   
               </span>
            </div>

        </el-card>
      </div>
  </div>
</template>

<script>

export default {
  name: 'projectLeft',
  components: {
    
  },
  data() {
    return {
      searchKeyWord: '',
      isShowIcon: false,
      isShowIconOther: false,
      myJoinProList: [
          {status: '0', proName: 'OA系统项目', proUserName: '张三', id: 11}
      ]
    }
  },
  mounted() {
    
  },
  filters: {
      proStatus (state) {
          switch (state) {
              case '0':
                return '进行中'
              case '1':
                return '已完成'
              default:
                return ''
          }
      }
  },
  methods: {
      searchPro () {
          console.log(this.searchKeyWord)
      },
      projectList () {
          this.isShowIcon = !this.isShowIcon
          if (this.isShowIcon === true) {
            console.log(123)
          }
      },
      //其他任务
      projectOtherList () {
          this.isShowIconOther = !this.isShowIconOther
          if (this.isShowIconOther === true) {
            console.log(456)
          }
      }
  },
}
</script>
<style scoped lang="scss">
    .proMunList{
        
        .searchIpt{
            width: 80%;
            margin: 0 auto;
        }

        .myJointest{
            display: flex;
            align-items: center;
            margin-top: 20px;
            .joinIcon{
                width: 18px;
                height: 18px;
                line-height: 18px;
                border-radius: 50%;
                background-color: #dee1eb;
                margin-left: 200px;
                text-align: center;
                cursor: pointer;
            }
            .iconItem{
                font-size: 13px;
            }
        }

        .proListname{
            width: 95%;
            height: 60px;
            display: flex;
            margin: 0 auto;
            background-color: #f1f4ff;
            border-radius: 5px;
            cursor: pointer;
            .proListname_left{
                width: 6%;
                height: 100%;
                border-radius: 5px;
                background-color: rgb(10, 255, 63);
                color: #ffff;
                font-size: 13px;
                line-height: 17px;
                text-align: center;
                padding-top: 5px;
                letter-spacing: 5px;
                writing-mode:vertical-lr;
            }
            .proListname_right{
                line-height: 8px;
                margin-left: 10px;
                p:nth-child(2){
                    font-size: 12px;
                    color: rgba(128, 128, 128, 0.8);
                }
            }
        }
    }
</style>